<template>
<div class="search" id="header">
  <el-page-header @back="goBack" content="搜索内容">
  </el-page-header>
  <div  class="newlist" v-for="(item, index) in newList"  :key="index">
    <div class="newleft"  @click="toNewcontent(item)">
      <div class="top-demo">
        {{item.newtitle }}
      </div>
      <div class="bottom-demo">
        <div> {{item.newauthor }}</div>
        <div>{{item.comment||0}}评论</div>
        <div>{{item.createtime | filtertime}}</div>
      </div>
    </div>
    <div class="newright" @click="toNewcontent(item)">
      <img
          :src="item.newimg"
          :alt="item.newimg"
      />
    </div>
  </div>
  <div class="go-top"><a href="#header" >UP</a></div>

</div>
</template>
<script>
import  pubsub from 'pubsub-js'
import moment from "moment/moment";
import  {searchNewsByTitle} from "@/api/News"
export default {
  name: "SearchList.vue",
data(){
    return{
  newList:[],
      pageNum: 1,
      pageSize: 100,
    }
},
  created() {
    this.$on('search-event', this.getSearchList());
  },
  filters:{
    filtertime(value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    },
  },
  mounted() {
    pubsub.subscribe("input",()=>{
   this.getSearchList()
    })
  },
  methods:{
    //当点击进详情页，返回的时候需要查询一次，不然会出现没有数据的情况
    getSearchList() {
      console.log('searchtext')
      let text = this.$route.query.searchtext
      searchNewsByTitle(text, this.pageNum, this.pageSize).then((res) => {
        this.newList = res.records;
      })
    },
    goBack(){
      this.$router.back()
      console.log('go back');
    },
    toNewcontent(item){
      this.$router.push({path:'/home/newcontent',query:{newid:item.id}})
    },
  }
}
</script>

<style scoped>
.search{
  width: 750px;
  margin: auto;
}
.newlist {
  width: 750px;
  height: 168px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 13px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #ccc;
  line-height: 35px;
}
.newlist .newleft {
  width: 496px;
  height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.top-demo {
  font-size: 20px;
}
.bottom-demo {
  color: #999999;
  display: flex;
}
.bottom-demo div {
  padding-right: 20px;
}
.newright {
  width: 240px;
  height: 168px;
  border-radius: 4px;
  padding-left: 20px;
}
.newright img {
  border-radius: 4px;
  width: 240px;
  height: 168px;
}
.go-top {
  position: fixed;
  right: 150px;
  bottom: 100px;
  cursor: pointer;
  height: 50px;
  width: 50px;
  background-color: #f2f5f6;
  box-shadow: 0 0 6px rgba(0,0,0, .12);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 28px;
  color: #1989fa;
}
.go-top:hover{
  transform: scale(1.3);
  transition: all 0.4s ease 0s;
  -webkit-transform: scale(1.3);
}
.go-top a{
  text-decoration: none;
  color:  #1989fa;
}
</style>
